Introduction to programming

Computer programming is the process of designing and writing computer programs. As a skill set, it includes a wide variety of different tasks and techniques, but our tutorials are not intended to teach you everything. Instead, they are meant to provide basic, practical skills to help you understand and write computer code that reflects things you see and use in the real world.

What these tutorials will cover

These tutorials focus on one particular type of programming: web development. When you visit websites, whether you use a laptop, a smartphone, or anything else, you're actually looking at computer code, which a web developer likely wrote, and which your web browser is interpreting to show you what you see on the screen

These tutorials will show you how to begin writing three common types of code used in web development, which combined make up the average website that you see every day: HTML, CSS, and JavaScript.

Parts of a website

Imagine that every website you visit is a person. Every person is different in how they look, act, and speak, but they're generally made up of the same basic pieces.

HTML

If you imagine a website as a person, you can think of HTML as being the skeleton.

HTML is at the center of almost everything you see on the Internet. While it doesn't look like much on its own, it forms the building blocks on top of which all the other pieces rest. The HTML for an extremely simple website might look something like this:

And if you loaded that in your browser, you'd see this:

CSS

If HTML is the skeleton, you can think of CSS as making up all the muscle, skin, and so on that make a person actually look like a person.

CSS doesn't do anything on its own. Instead, it takes plain HTML and styles it to look different. It can make what you see in the browser bigger or smaller, reorganize the pieces on the page, add colors, and more. Some CSS for an extremely simple website might look something like this:

If you were to apply the above CSS to the same extremely simple website you saw before, it would look like this:

JavaScript

If HTML and CSS have combined to make a person that looks like a person, you can think of JavaScript as being the brain. Without it, a person just sits there, but with it, they are active and alive.

---

JavaScript can change the HTML and CSS of a website in real time after it has loaded. It can hide things, add new things, change what things look like, and more. Any time something on a website changes while you are looking at it, there is a good chance that JavaScript is being used to do it.

---

For example, imagine that you wanted the browser to create a pop-up greeting whenever somebody loaded the extremely simple website from before. One way would be to write some code that looks like this:

And when you loaded the website, you would see something like this:

Start programming

Now that you have your web browser and workspace prepared, you're ready to start programming.

Coding . CSS